<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 1226px;
            height: 460px;
            box-sizing: border-box;

            margin: 20px auto;
            position: relative;
        }

        .right img {
            width: 100%;
            position: absolute;
            opacity: 0;
            transition: all  0.6s;
      }

        .left {
            position: absolute;
            padding: 20px 0px;
            background-color: #ccc;
          box-sizing: border-box;
            z-index: 1;
          }

        .list a {
            display: block;
            width: 234px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            background-color: #ccc;
            padding-left: 30px;
            text-decoration: none;
            color: #fff;
            font-size: 12px;
            background: url(images/单箭头.png) no-repeat 95% center;
        }

        .bg {
            background-color: #FF6700 !important;
        }

        .content {
            position: absolute;
            height: 460px;
            width: 962px;
            background-color: #fff;
            top: 0px;
            left: 264px;
            display: none;


        }

        .pic>div {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            position: absolute;
            z-index: 888;
            top: 50%;
            margin-top: -20px;

        }

        .pic div:nth-of-type(2) {
            right: 0px;


        }

        .pic div:nth-of-type(1) {
            left: 264px;
        }

        .yuan {
            position: absolute;
            right: 5px;
            width: 150px;
          bottom: 10px;
        }

        .yuan>span {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: #ccc;
            float: left;
            margin: 5px;
        }

        .clearfix:after {
            display: block;
            content: "";
            clear: both;
        }

        .bg {
            color: blue;
            z-index: 99;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="left">
            <div class="list">
                <a href="">手机 手机卡</a>
                <a href="">电视 盒子</a>
                <a href="">电脑 显示器 平板</a>
                <a href="">家用</a>
                <a href="">出行穿戴</a>
                <a href="">智能板 路由器</a>
                <a href="">电源配件</a>
                <a href="">健康 儿童</a>
                <a href="">耳机</a>
                <a href="">生活 箱子</a>

            </div>
            <div class="content">

            </div>



        </div>
        <div class="right">
            <div class="pic">
                <div class="prev">上一张</div>
                <div class="next">下一张</div>
            </div>
            <div class="imglist">
                <img style="opacity: 1;" src="images/1.jpg" />
                <img src="images/2.jpg" />
                <img src="images/3.jpg" />
                <img src="images/4.jpg" />
            </div>

            <div class="yuan  clearfix">
                <span class="bg"></span>
                <span></span>
                <span></span>
                <span></span>

            </div>



        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $('.list>a').hover(function () {
                $(this).addClass('bg')
                $('.content').show()
                var text = $(this).text()
                $('.content').text(text)
                $('.pic>div').hide()
            }, function () {
                $(this).removeClass('bg')
                $('.content').hide()
                $('.pic>div').show()
            })
            //当点击下一张的时候
            $('.next').click(function () {
                //ele当前事件，  //遍历所有的图片
                var arrs = $('.imglist').children();
                 $('.imglist').children().each(function () {
               if ($(this).css('opacity') > 0) { //假如当前的透明图为1，则隐藏
                        $(this).css('opacity', '0')
                        var index = $(this).index()
                        $('.yuan>span:eq(' + index + ')').removeClass('bg')
                       var i = index + 1;
                        if (i == arrs.length) {
                            i = 0;
                            $('imglist>img:eq(0)').css('opacity', '1')
                            $('.yuan>span:eq(0)').addClass('bg')
                         }
                        if ((i >= 0 && i < arrs.length)) {
                            $('.imglist>img:eq(' + i + ')').css('opacity', '1')
                            $('.yuan>span:eq(' + i + ')').addClass('bg')
                        } }
                }) })
            //当点击上一张的时候
            $('.prev').click(function () {
                var arrs = $('.imglist').children();
                $('.imglist').children().each(function () {
                    if ($(this).css('opacity') > 0) {
                        $(this).css('opacity', '0')

                        var index = $(this).index()
                        $('.yuan>span:eq(' + index + ')').removeClass('bg')

                        var i = index - 1;
                        if (i < 0) {
                            $(this).css('opacity', '0')
                            $('.imglist>img:eq(3)').css('opacity', '1')
                            $('.yuan>span:eq(3)').addClass('bg').siblings().remove('bg');
                        }
                        if (i >= 0 && i < arrs.length) {
                            $('.imglist>img:eq(' + i + ')').css('opacity', '1')
                            $('.yuan>span:eq(' + i + ')').addClass('bg').siblings().remove('bg')
                        }  }
                     })
                    })
           //自动播放
        autoplay();
        function  autoplay(){
            setInterval(play,2000)
        }
        function  play(){
            $('.imglist').children().each(function(){
                var  arrs=$('.imglist').children();
                if($(this).css('opacity')>0){
                    $(this).css('opacity','0')
                    var index=$(this).index()
                    $('.yuan>span:eq('+index+')').removeClass('bg')
                     var i=index+1;
                     if(i==4){
                        i=0;
                        $('.imglist:eq(3)').css('opacity','0')
                        $('.imglist:eq(0)').css('opacity','1')
                        $('.yuan>span:eq(0)').addClass('bg')
                    }
                    if((i>=0&&i<arrs.length)){
                   $('.imglist>img:eq('+i+')').css('opacity','1')
                   $('.yuan>span:eq('+i+')').addClass('bg')
                    }
               }
                 })} 
                 
                 
                 
                 
                 
        })






    </script>











</body>

</html>